<!DOCTYPE html>
<html>
<head>
<title>Blink Text</title>
<script src="../lib/zeu.js"></script>
<script src="examples.js"></script>
<link rel="stylesheet" href="example.css">
<style>
.box {
  padding: 10px;
}
</style>
</head>
<body>
  <div class="container">
    <h3>Default</h3>
    <pre><code>
var binkText1 = new zeu.BlinkText(document.getElementById('blink-text-1'));
binkText1.blink();
    </code></pre>
    <div id="blink-text-1" class="box">
      blink text
    </div>

    <h3>Options</h3>
    <pre><code>
var binkText2 = new zeu.BlinkText(
  document.getElementById('blink-text-2'), {
    interval: 300,
    blinkCss: 'color: white; background-color: blue;'
  });
binkText2.blink();
binkText2.blinkCss = 'color: white; background-color: green;';
binkText2.interval = 2000;
binkText2.blink('NEW BLINK TEXT');  
    </code></pre>
    <div id="blink-text-2" class="box">
      blink constructor
    </div>

    <h3>Unblink</h3>
    <pre><code>
var binkText3 = new zeu.BlinkText(document.getElementById('blink-text-3'));
binkText3.blink();
binkText3.unblink();
    </code></pre>
    <div id="blink-text-3" class="box">
      blink setters
    </div>

  </div>
</div>

<script type="text/javascript">

  var binkText1 = new zeu.BlinkText(document.getElementById('blink-text-1'));
  binkText1.blink();

  var binkText2 = new zeu.BlinkText(
    document.getElementById('blink-text-2'), {
      interval: 300,
      blinkCss: 'color: white; background-color: blue;'
    });
  binkText2.blink();
  binkText2.blinkCss = 'color: white; background-color: green;';
  binkText2.interval = 2000;
  binkText2.blink('NEW BLINK TEXT');  

  var binkText3 = new zeu.BlinkText(document.getElementById('blink-text-3'));
  binkText3.blink();
  binkText3.unblink();
    
</script>
</body>
</html>
